<template>
  <div>
    <div class="node" v-has="{action: 'equipmentExtraSichuansheng:list', effect: 'move'}">
    <Panel title="充电桩扩展信息列表" useBack>
      <div slot='ext' class="examine">
        <el-button size="mini" v-has="{action: 'equipmentExtraSichuansheng:add', effect: 'move'}" class="button-offt" type="success" icon="el-icon-plus" @click="()=>editStore()">新增</el-button>
      </div>
    <TableEncapsulation
      slot="body"
      :tableConfig="tableConfig"
      :tableData="tableData"
    >
    <template slot="operation" slot-scope="operation">
          <el-button 
          v-has="{action: 'equipmentExtraSichuansheng:update', effect: 'move'}"
          type="text" @click="()=>updateExtend(operation.row.id, operation.row.pileName)">编辑扩展信息</el-button>
        </template>
        <TablePager
          slot="pager"
          v-if="pager.use"
          :size="pager.size"
          :pageChange="pageChange"
          :show-total="pager.showTotal"
          :total="pager.total"
          :current="pager.current"
        >
          <span class="demonstration">GO></span>
        </TablePager>
    </TableEncapsulation>
    </Panel>
    <!-- 添加编辑 start-->
    <ModalPanel 
      :visible='visible'
      title="添加/编辑"
      :onCancel="onCancel"
      class="bannerDialog"
      :onOk="onSubmit">
      <div>
        <ModifyForm
          :hiddenBtn='true'
          :editColumn='editColumn'
          :updateData="updateData"
          labelWidth='100px'
          ref="configModal"
          class="ModifyForm"
          :temporaryData='modalData'>
        </ModifyForm>
      </div>
    </ModalPanel>
    <!-- 添加编辑end -->
    </div>
    <div style="display: none;width:100%;height:100%;margin: auto;" v-has="{action: 'equipmentExtraSichuansheng:list', effect: 'noPremiss'}">
      <NoPremission></NoPremission>
    </div>
  </div>
</template>
<script>
import request from "@/tools/request";
import Panel from "@/components/Panel";
import TableEncapsulation from "@/components/TableEncapsulation";
import TablePager from "@/components/Pager";
import SearchInput from "@/components/SearchInput";
import SearchSelect from "@/components/SearchSelect";
import { objectFilter } from "@/tools/array";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
export default {
  name: "pileextendlist",
  components: {
    TableEncapsulation,
    TablePager,
    Panel,
    SearchInput,
    SearchSelect,
    ModifyForm,
    ModalPanel
  },
  data() {
    return {
      tableData: [],
      siteList: [],
      searchs: {
        component: 'pile',
        site:"",
        sn: '',
        name: '',
        deviceId:'',
        type:'',
        state:'',
      },
      // selectValue: [],
      // loading:false,
      deviceList:[],
      pager: {
        component: 'pile',
        use: true,
        total: 0,
        current: 1,
        size: 10,
        showTotal: true
      },
      operation: true,
      //添加编辑
      visible:false,
      modalData:{},
      editColumn: [
        {
          name: "站点",
          prop: "stationId",
          type: "select",
          optionBindLabel: 'stationName',
          optionBindValue: 'id',
          optionList: [{'id':'','stationName':'充电站'}],
          onChange: () => {},
          required:true,
          width:24
        },
        {
          name: "行政区划代码",
          prop: "areaCodeCountryside",
          type: "text",
          width:24,
          required: true,
          desc: '充换电站所在县以下行政区划代码'
        },
        {
          name: "站点分类",
          prop: "stationClassification",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': 1,'name': "充电站"},{'id':2, 'name':"换电站"},{'id':3, "name":'充电一体站'}],
          width:24,
          onChange: () => {},
          required: true
        }, 
        {
          name: "通用类型",
          prop: "generalApplicationType",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': 1,'name': "通用"},{'id':2, 'name':"非通用"}],
          width:24,
          onChange: () => {},
          desc:'1:通用(可分为3种及以上的换电车型进行换电的换电站) 2:非通用 注:站点分类为“换电站”或者“充电一体站”时,此字段为必填项;站点分类为“充电站”时,此字段为非必填项'
        }, 
        {
          name: "服务车型描述",
          prop: "manufacturerId",
          type: "text",
          width:24,
          required: true,
          desc: '站点分类为2或3时,此字段为必填项;站点分类为1时,此字段为非必填项)'
        },
        {
          name: "是否7*24小时营业",
          prop: "roundTheClock",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':true, 'name':"支持"},{'id': false,'name': "不支持"}],
          width:24,
          onChange: () => {},
          required: true
        }, 
        {
          name: "停车费类型",
          prop: "parkType",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':0, 'name':"免费"},{'id': 1,'name': "不免费"},{'id': 2,'name': "限时免费停车"},{'id': 3,'name': "充电限时减免"},{'id': 255,'name': "参考场地实际收费标准"}],
          width:24,
          onChange: () => {},
          required: true
        },  
        {
          name: "电费类型",
          prop: "electricityType",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': 1,'name': "商业用电"},{'id': 2,'name': "普通工业用电"},{'id': 3,'name': "大工业用电"},{'id': 4,'name': "其他用电"}],
          width:24,
          onChange: () => {},
          required: true
        },  
        {
          name: "是否独立报桩",
          prop: "isAloneApply",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id': true,'name': "是"},{'id':false, 'name':"否"}],
          width:24,
          onChange: () => {},
          required: true
        }, 
        {
          name: "报装电源容量",
          prop: "capacity",
          type: "text",
          width:24,
          desc:'独立报桩必填',
          required: false
        },
        {
          name: "站点额定总功率",
          prop: "ratedPower",
          type: "text",
          width:24,
          required: true,
          desc: 'KW'
        },
        {
          name: "是否峰谷分时",
          prop: "periodFee",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':true, 'name':"是"},{'id': false,'name': "否"}],
          width:24,
          onChange: () => {},
          required: true
        }, 
        {
          name: "正式投运时间",
          prop: "officialRunTime",
          type: "other",
          slotName: 'timePost',
          width:24,
        },
        {
          name: "视频监控配套情况",
          prop: "videoMonitor",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':true, 'name':"已配备"},{'id': false,'name': "未配备"}],
          width:24,
          onChange: () => {},
          required: true
        }, 
        {
          name: "供电局用户编号",
          prop: "manufacturerId",
          type: "text",
          width:24,
          required: true,
          desc: '直供电必填'
        },
        {
          name: "供电类型",
          prop: "supplyType",
          type: "radio",
          optionBindLabel: 'name',
          optionBindValue: 'id',
          optionList: [{'id':1, 'name':"直供电"},{'id': 2,'name': "转供电"}],
          width:24,
          onChange: () => {},
          required: true
        },
        {
          name: "表号",
          prop: "wattHourMeterNo",
          type: "text",
          width:24,
          required: true
        },
        {
          name: "外电功率",
          prop: "forwardPower",
          type: "number",
          width:24,
          required: true
        },
        {
          name: "唯一备案号",
          prop: "recordUniqueNo",
          type: "text",
          width:24,
          required: true,
          desc: '充电站全省唯一备案号'
        },
      ],
      //添加编辑end
    };
  },
  computed: {
    tableConfig () {
      return {
        selection: false,
        columnConfig: [
          {
            label: "桩名称",
            type: "text",
            prop: "pileName",
            align: "center"
          },
          {
            label: "设备生产商组织机构代码",
            type: "text",
            prop: "manufacturerId",
            align: "center"
          },
          {
            label: "设备产权所属单位ID",
            type: "text",
            prop: "equipmentOwnerId",
            align: "center"
          },
          {
            label: "设备生产商名称",
            type: "text",
            prop: "manufacturerName",
            align: "center"
          },
          {
            label: "设备型号",
            type: "text",
            prop: "equipmentModel",
            align: "center"
          },
          {
            label: "设备出厂编码",
            type: "text",
            prop: "equipmentProductCode",
            align: "center"
          },
          {
            label: "变压器户号",
            type: "text",
            prop: "transformerId",
            align: "center"
          },
          {
            label: "设备生产日期",
            type: "text",
            prop: "productionDate",
            align: "center"
          },
          {
            label: "建设时间",
            type: "text",
            prop: "constructionTime",
            align: "center"
          },
         
          {
            label: "是否新国标",
            type: "other",
            prop: "nationalStandard",
            align: "center",
            fnc: val => val  ? '是':  '否',
            class: val => val ? 'agree': 'cancel'
          },
          {
            label: "是否支持VIN码",
            type: "other",
            prop: "vinFlag",
            align: "center",
            fnc: val => val  ? '是':  '否',
            class: val => val ? 'agree': 'cancel'
          },
          {
            label: "设备用途",
            type: "other",
            prop: "equipmentPurpose",
            align: "center",
            fnc: val =>  val ==1 ? '公共' :  val ==50 ? '个人':  val ==100 ? '公交专用' :  val ==101 ? '环卫专用' :  val ==102 ? '物流专用' :  val ==103 ? '出租车专用' :  val ==104 ? '分时租赁（专用）' :  val ==106 ? '单位（专用）' :  val ==107 ? '移动站点（移动储能设备）' :  val ==108 ? '小区公共是整型' :  val ==105 ? '预留' :  val ==201 ? '换电非通用型为单一品牌换电' :  val ==202 ? '(换电)通用型为支持多品牌换电' :  val ==5 ? '站（公共）' :  val ==109 ? '居民小区（专用）': '',
          },
          {
            label: "设备分类",
            type: "other",
            prop: "equipmentClassification",
            align: "center",
            fnc: val => val==1  ? '车辆充电设备':  val==2  ? '换电站内的电池箱充电设备':'',
          },
          this.operation && {
            type: "operation",
            align: "center",
            label: "操作",
            width:180
          }
        ].filter(Boolean)
        }
    }
  },
    mounted() {
    this.getData();
    this.getStation()
  },
  methods: {
    //获取站点
    async getStation(){
      let { data } = await request({
      url: "/manage/station/select",
      method: "POST",
      data: {}
      });
      this.editColumn[0].optionList = data
    },
    async getData() {
      let current = this.pager.current
      let size = this.pager.size
      let search = objectFilter({current, size })
      const res = await request({
        url: "/manage/station/extra/sichuansheng/query",
        method: "POST",
        data:  search
      });
      this.tableData = res.page.records
      this.pager.total = res.page.total
      this.pager.current = res.page.current
    },
    pageChange(val) {
      this.pager.current = val;
      this.getData();
    },
    searchSelect(key, val){
      this.searchs[key] = val;
      this.pager.current = 1;
      this.getData()
    },
    
    changeSearch(key, val) {
      this.searchs[key] = val;
      this.pager.current = 1;
    },
    updateExtend(id, name){
      this.$router.push({ path: "/extra/site/province/info", query:{id,name}})
    },
    //添加编辑start
    editStore(rowData){
      if(rowData){
        this.modalData = {...rowData}
      }else{
        this.modalData ={}
      }
      this.visible = true
    },
    async onSubmit(){
      this.$refs['configModal'].onSubmit()
    },
    onCancel(){
      this.visible = false
    },
    async updateData(values){
     let id = this.id
     let officialRunTime = this.officialRunTime
     let stationId = this.stationId
     let url = id? '/manage/station/extra/sichuansheng/update': '/manage/station/extra/sichuansheng/add'
     const  { areaCodeCountryside, stationClassification, generalApplicationType, 
     manufacturerId, roundTheClock, parkType, electricityType, isAloneApply, capacity, ratedPower
     , periodFee, videoMonitor, supplyType, wattHourMeterNo, forwardPower, recordUniqueNo } = values
       if(stationClassification!=1 && !generalApplicationType){ return this.$message.error('请选择通用类型')}
     let res = await request({
       url: url,
       method: 'POST',
       data: {id,officialRunTime, stationId, areaCodeCountryside, stationClassification, generalApplicationType, 
     manufacturerId, roundTheClock, parkType, electricityType, isAloneApply, capacity, ratedPower
     , periodFee, videoMonitor, supplyType, wattHourMeterNo, forwardPower, recordUniqueNo}
     })
     if(res.code !==200) return
      this.$message.success(msg)
      this.visible = false
      this.getData();
    },
  }
}
</script>
<style lang='scss' >

</style>